import React from "react";
import { Button, Checkbox, Form, Input, message } from "antd";
import type { FormProps } from "antd";
import { useNavigate } from "react-router-dom";
import "./index.css";
import axios from "axios";
const Index: React.FC = () => {
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };
  const navigate = useNavigate();

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    axios.post("/api/login", values).then((resp) => {
      let { code, msg, row, info, user, token } = resp.data;
      if (code == 200) {
        message.success(msg);
        localStorage.setItem("token", token);
        localStorage.setItem("user", user);
        localStorage.setItem("row", row);
        localStorage.setItem("info", JSON.stringify(info));
        navigate("/home/home");
      } else {
        message.error(msg);
      }
    });
  };

  return (
    <div>
      <div className="title">
        <h1 className="cx">科技创新</h1>
      </div>
      <div className="img">
        <img src="https://wanx.alicdn.com/wanx/1111111111/text_to_image/91f917d368024b06bc64602a5933d820_0.png?x-oss-process=image/watermark,image_d2FueC93YXRlcm1hcmsvcWlhbndlbl93YXRlcm1hcmsucG5n,t_80,g_se,x_30,y_30/format,webp" />
      </div>
      <div className="box">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="密码"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <div className="btn">
              <Button type="primary" htmlType="submit" className="dl">
                登录
              </Button>
              &emsp;
              <Button type="primary" onClick={() => navigate("/sigin")}>
                注册→
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Index;
